<template>
	<view class="wrap" style="display: flex;flex-direction: column;">
		<view style="background-color: #FFFFFF;">
			<cu-custom :isBack="true">
				<block slot="backText"></block>
				<block slot="content">{{corpCode}}-条码比对2.0</block>
			</cu-custom>
			<view class="cu-bar bg-white search  indexes">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @confirm="search()" v-model="inputVal" type="text" placeholder="请输入装箱单号"
						:focus="focus"></input>
				</view>
				<view class="action" @click="toScan">
					<text class="cuIcon-scan" style="font-size: 56rpx;"></text>
				</view>
			</view>
		</view>
		<view style="flex: 1;">
			<view style="margin:10px 5px 10px;overflow: scroll;height: 54vh;">
				<div style="float: left; color: red;font-size: 16px;font-weight: bold;">{{zxCode}}</div>
				<uni-button size="mini" type="primary"
					style="margin-bottom: 2%;width: 100px;height: 30px;font-size: 16px;float: right;">
					{{status?status:'未开始'}}
				</uni-button>

				<uni-table border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="10%">NO</uni-th>
						<uni-th width="50%">SKU</uni-th>
						<uni-th width="20%">数量</uni-th>
						<uni-th width="20%">已核</uni-th>
					</uni-tr>
					<uni-tr v-if="list.length" v-for="(item,index) in list" :key='index'
						:style="{backgroundColor: item.yelFlag=='2'? '#81b337':item.yelFlag=='1'?'yellow':''}">
						<uni-td width="10%">{{index + 1}}</uni-td>
						<!-- <uni-td width="150px"> {{item.code}}</uni-td> -->
						<uni-td width="50%">{{item.sku}}</uni-td>
						<uni-td width="20%">{{item.iqty}}</uni-td>
						<uni-td width="20%" style="text-align: right;">{{item.passQty?item.passQty:0}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<!-- <uni-section title="修改数据长度" type="line" padding> -->
			<view class="">
				<!-- <uni-pagination :current="pageNo" :total="count" title="标题文字" :show-icon="true" @change="change" /> -->
				<uni-pagination :current="pageNo" :total="count" :pageSize="pageSize" prev-text="前一页" next-text="后一页"
					@change="change" />
				<view class="btn-view" style="background-color: #f1f1f1;">
					<view>
						<text class="example-info">数据总量：{{ count }}条，每页数据：{{ pageSize }}</text>
					</view>
				</view>
			</view>

			<!-- </uni-section> -->
			<view>
				<view class="fixed-text">
					<view>
						总数量：<text style="color: #878700;padding-right: 10px;font-size: 24px;">{{totalNUm}}</text>
					</view>
					<view>
						已核对：<text style="color: #81b337;padding-right: 10px;font-size: 24px;">{{checkNum}}</text>
					</view>
					<view>
						待核对：<text style="color: #e5d202;padding-right: 10px;font-size: 24px;">{{preCheck}}</text>
					</view>
				</view>
				<view class="fixed-button">
					<uni-button size="mini" type="primary" @click="checkPage()"
						style="margin-bottom: 15px;width: 110px;height: 30px;font-size: 16px;">
						条码校对
					</uni-button>
					<uni-button size="mini" type="primary" @click="checkOver()"
						style="width: 110px;height: 30px;font-size: 16px;">
						校对完成
					</uni-button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniPagination from "@/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue"
	export default {
		components: {
			uniPagination
		},
		data() {
			return {
				pageNo: 1, // 当前页码  
				pageSize: 30, // 每页显示的条目数  
				count: '', // 总条目数  
				// items: [] // 分页数据  
				list: [],
				focus: true,
				CustomBar: this.CustomBar, //滚动定位用
				inputVal: "", //扫码值
				totalNUm: '', //总数量
				checkNum: '', //核对通过
				preCheck: '', //等待核对
				zxCode: '', //装箱单号
				supplierId:'',//供应商Id
				frequency: '', // 扫码次数
				cstatus: '',
				status: '',
				xmCode: '', //存放装箱单号
				yelFlag: '0', //1--黄色   2--绿色
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'auditlist', 'corpCode']),
			// totalPages() {
			// 	return Math.ceil(this.totalNUm / this.pageSize);
			// },
			// totalNUm() {
			// 	return this.list.length;
			// },
		},
		onShow() {
			// 如果列表数据存在,就刷新
			if (this.xmCode) {
				this.list = [];
				this.refreshData();
			}
		},
		methods: {
			change(e) {
				console.log(e)
				this.pageNo = e.current
				this.refreshData()
			},
			// 跳转条码比对页面	
			checkPage() {
				if (this.list.length == 0) {
					this.$api.msg('请先扫描装箱单号！');
					return;
				} else {
					let obj = {
						code: this.zxCode,
						supplierId: this.supplierId,
						frequency: this.frequency
					}
					this.changeStatus()
					uni.navigateTo({
						url: '/pages/packageInv/checkBarCode?data=' + JSON.stringify(obj),
					});
				}
			},
			// 跳转条码校对页面
			search() {
				this.xmCode = this.inputVal
				this.refreshData();
				setTimeout(() => {
					this.focus = true; //  第二个输入框获取焦点
					this.inputVal = ''
				}, 500)
			},
			// 刷新页面
			refreshData() {
				if (this.isCheck) {
					this.cleanData();
				}
				uni.request({
					url: this.serverURL_a + `/so/App/getBox`,
					data: {
						xmCode: this.xmCode,
						__sid: this.userInfo.sessionid,
						pageSize: this.pageSize,
						pageNo: this.pageNo,
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success: function(res) {
						if (res.data.result == 'false') {
							this.$api.msg('扫码失败！');
							this.list = []
							setTimeout(() => {
								this.cleanData();
							}, 1500)

							this.focus = false; // 初始化 第二个输入框focus 属性
							setTimeout(() => {
								this.focus = true; //  第二个输入框获取焦点
							}, 1000)
							return;
						} else {
							let ws = res.data.data;
							this.zxCode = ws.code
							this.supplierId = ws.supplierId
							this.frequency = ws.frequency
							this.count = res.data.data.count
							this.totalNUm = res.data.data.totalQty
							this.status = res.data.data.status
							// 将状态修改为"校验中"
							if (res.data.data.cstatus == '0') {
								this.cstatus = 1
							} else {
								this.cstatus = res.data.data.cstatus
							}
							if (!res.data.data.passQty) {
								this.checkNum = 0
							} else {
								this.checkNum = res.data.data.passQty
							}
							ws.soBoxVoucherSkuList.forEach(item => {
								if (!item.passQty) {
									item.passQty = 0
								}
								if (item.cstatus == '2') {
									item.yelFlag = '2';
								} else if (item.cstatus == '1') {
									item.yelFlag = '1';
								}
							})

							this.preCheck = this.totalNUm - this.checkNum
							if (ws) {
								this.list = res.data.data.soBoxVoucherSkuList;
							}
						}

					}.bind(this),
					fail: function() {
						this.$api.msg('服务已停止,请稍后再试');
						setTimeout(() => {
							this.cleanData();
						}, 1500)
						return;
					}.bind(this),
				})
			},
			// 校对完成
			checkOver() {
				if (this.list.length == 0) {
					this.$api.msg('请先扫描装箱单号！');
					return;
				} 
				uni.showModal({
					title: '提示',
					content: '是否确认全部完成',
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							this.cstatus = 2
							this.changeStatus();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
						setTimeout(() => {
							this.focus = true;
						}, 500)
					}
				});
			},
			// 改变按钮状态
			changeStatus() {
				uni.request({
					url: this.serverURL_a + `/so/soBoxVoucher/updateCstatus`,
					data: {
						code: this.zxCode,
						__sid: this.userInfo.sessionid,
						cstatus: this.cstatus,
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
					},
					method: 'POST',
					success: function(res) {
						this.inputVal = ''
						console.log(res.data.message)
					}.bind(this),
					fail: function() {
						this.$api.msg('修改装修状态失败！');
						this.inputVal = ''
						return;
					}.bind(this),
				})
			},
			/** 扫码失败*/
			scSb() {
				console.log("=====testClick=====");
				let src = '../../static/smsb.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			/** 扫码成功*/
			scCg() {
				console.log("=====testClick=====");
				let src = '../../static/smcg.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			/** 清空数据 */
			cleanData() {
				this.srmviewCode = '';
				this.hwcode = '';
				this.isCheck = false;
			},
			/** 扫码*/
			toScan() {
				uni.scanCode({
					//是否只能从相机扫码，不允许从相册选择图片
					onlyFromCamera: true,
					success: function(res) {
						console.log(res)
						// res.result:JH-20231110-US003-0003
						var rdata = res.result;
						this.inputVal = rdata;
						setTimeout(function() {
							this.search();
						}.bind(this), 100);
					}.bind(this)
				});
			},
		}
	}
</script>

<style lang="scss">
	.fixed-text {
		position: fixed;
		bottom: 25px;
		left: 20px;
		font-size: 17px;
		// display:flex;
		// flex: 1;
		// height: 20%;
	}

	.fixed-button {
		position: fixed;
		bottom: 52px;
		right: 20px;
		width: 100px;
		height: 50px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.btn-view {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px;
		text-align: center;
		background-color: #fff;
		justify-content: center;
		align-items: center;
	}

	.btn-flex {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.button {
		margin: 20px;
		width: 150px;
		font-size: 14px;
		color: #333;
	}
</style>